import { Component, OnInit } from '@angular/core';
import { ChartConfiguration } from 'chart.js';
import { TranslateService } from '@ngx-translate/core';
import { VulnerabilitiesService } from '../../vulnerabilities.service';
import { VulnerabilitiesFilterService } from '@routes/vulnerabilities/vulnerabilities.filter.service';

@Component({
  selector: 'app-vulnerability-items-charts',
  templateUrl: './vulnerability-items-charts.component.html',
  styleUrls: ['./vulnerability-items-charts.component.scss'],
})
export class VulnerabilityItemsChartsComponent implements OnInit {
  vulnerabilitySeverityDistChartData!: ChartConfiguration<
    'doughnut',
    number[],
    string[]
  >;
  vulnerabilityTargetDistChartData!: ChartConfiguration<
    'doughnut',
    number[],
    string[]
  >;

  constructor(
    private translateService: TranslateService,
    private vulnerabilitiesService: VulnerabilitiesService,
    private vulnerabilitiesFilterService: VulnerabilitiesFilterService
  ) {}

  updateData(): void {
    this.vulnerabilityTargetDistChartData.data = {
      ...this.vulnerabilityTargetDistChartData.data,
      datasets: [
        {
          ...this.vulnerabilityTargetDistChartData.data.datasets[0],
          data: [
            this.vulnerabilitiesService.countDistribution.high,
            this.vulnerabilitiesService.countDistribution.medium,
          ],
        },
      ],
    };
    this.vulnerabilitySeverityDistChartData.data = {
      ...this.vulnerabilitySeverityDistChartData.data,
      datasets: [
        {
          ...this.vulnerabilitySeverityDistChartData.data.datasets[0],
          data: [
            this.vulnerabilitiesService.countDistribution.platform,
            this.vulnerabilitiesService.countDistribution.image,
            this.vulnerabilitiesService.countDistribution.node,
            this.vulnerabilitiesService.countDistribution.container,
          ],
        },
      ],
    };
  }

  ngOnInit(): void {
    this.vulnerabilityTargetDistChartData = {
      options: {
        cutout: 60,
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            mode: 'point',
          },
          title: {
            display: true,
            text: 'Vulnerabilities Severity Distribution',
          },
          legend: {
            display: true,
            labels: {
              boxWidth: 12,
            },
          },
        },
      },
      data: {
        labels: [['High'], ['Medium']],
        datasets: [
          {
            hoverBackgroundColor: ['#ef5350', '#ff9800'],
            backgroundColor: ['#ef5350', '#ff9800'],
            data: [
              this.vulnerabilitiesService.countDistribution.high,
              this.vulnerabilitiesService.countDistribution.medium,
            ],
          },
        ],
      },
      type: 'doughnut',
    };

    this.vulnerabilitySeverityDistChartData = {
      options: {
        cutout: 60,
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
        maintainAspectRatio: false,
        plugins: {
          tooltip: {
            mode: 'point',
          },
          title: {
            display: true,
            text: 'Vulnerabilities Target Distribution',
          },
          legend: {
            display: true,
            labels: {
              boxWidth: 12,
            },
          },
        },
      },
      data: {
        labels: [['Platform'], ['Image'], ['Node'], ['Container']],
        datasets: [
          {
            hoverBackgroundColor: ['#f22d3a', '#86aec2', '#4D5360', '#36A2EB'],
            backgroundColor: ['#f22d3a', '#86aec2', '#4D5360', '#36A2EB'],
            data: [
              this.vulnerabilitiesService.countDistribution.platform,
              this.vulnerabilitiesService.countDistribution.image,
              this.vulnerabilitiesService.countDistribution.node,
              this.vulnerabilitiesService.countDistribution.container,
            ],
          },
        ],
      },
      type: 'doughnut',
    };
    this.vulnerabilitiesService.countDistribution$.subscribe(count => {
      this.updateData();
    });
  }
}
